<template>
    <div class="header">
        <el-tabs v-model="activeValue" type="card">
            <el-tab-pane v-for="item in panes" :label="item.label" :name="item.name" :key="item.name">
                <component :is="item.content" :activeValue="activeValue"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import StrategySetting from './password-strategy/strategy-setting.vue';
import StrategyCheck from './password-strategy/strategy-check.vue';
@Component({
    name: 'PasswordStrategy',
    components: {
        StrategySetting,
        StrategyCheck,
    },
})
export default class PasswordStrategy extends Vue {
    activeValue: string = 'StrategySetting';
    panes: any[] = [
        {
            label: '密码策略设置',
            name: 'StrategySetting',
            content: 'StrategySetting',
        },
        {
            label: '密码策略复核',
            name: 'StrategyCheck',
            content: 'StrategyCheck',
        },
    ];
}
</script>
<style lang="scss" scoped>
.header {
    min-width: 1200px;
    padding-top: 4px;
    height: 100%;
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    border: 1px solid #e4e7ed;
    border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}
/deep/ .el-tabs {
    height: 100%;
    .el-tabs__content {
        height: calc(100% - 34px);
        .el-tab-pane {
            height: 100%;
        }
    }
    .el-tabs__nav {
        border: none;
        .is-active {
            border-color: #409eff;
            border-bottom: 2px solid #409eff;
        }
    }
}
</style>
